<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试事件冒泡和阻止冒泡</title>
</head>
<body>
<h1>测试事件冒泡和阻止冒泡</h1>
<hr>
<div id="div">
    <button id="btn">按钮</button>
    <a href="http://www.jikexueyuan.com" id="aid">极客学院</a>
</div>
<script>
    // document.getElementById("btn").addEventListener("click",showtype);
    // function showtype() {
    //     // alert("how do you do?");//
    // }正常添加句柄事件 能在网页上显示出来
    document.getElementById("btn").addEventListener("click",showType);
    document.getElementById("div").addEventListener("click",showDiv);
    document.getElementById("aid").addEventListener("click",showA);
    function showType(event) {
            // alert(event.type);//显示类型click点击事件 click可以换成mouseover
        alert(event.target);//显示目标
        event.stopPropagation();//阻止冒泡
    }
    function showDiv() {
                  alert("div");//事件冒泡
    }
    function showA(event) {
        event.stopPropagation();//阻止冒泡
        event.preventDefault();//阻止默认事件
    }
</script>
</body>
</html>